<script setup>
import {host_custom} from "@/host.js";
import {ref} from "vue";

import { parseFile } from 'music-metadata';
import AudioFile from "@/pages/chat/components/AudioFile.vue";

const showMetadata = async (url, type) => {
  try {
    const metadata = await parseFile(url);
    // console.log(metadata);
  } catch (error) {
    console.error('Error parsing metadata:', error.message);
  }
};

const props = defineProps({
  AttachmentUrlGroupConcat: {
    default: null,
    type: String
  },
  AttachmentMimeTypeGroupConcat: {
    default: null,
    type: String
  },
  isSending: {
    default: false,
    type: Boolean
  },
  file: {
    default: [],
    type: Array
  },
  progress: {
    default: null,
    type: Number
  }
})
const AttachmentUrls = ref(null)
const AttachmentMimeTypes = ref(null)

if (props.AttachmentUrlGroupConcat && props.AttachmentMimeTypeGroupConcat) {
  AttachmentUrls.value = props.AttachmentUrlGroupConcat.split(',')
  AttachmentMimeTypes.value = props.AttachmentMimeTypeGroupConcat.split(',')
}
const URLs = ref([])

if (props.file.length !== 0) {
  props.file.forEach(item=>{
    URLs.value.push(URL.createObjectURL(item))
  })
}

</script>

<template>
  <div v-if="isSending && file.length !== 0">
    <div class="d-flex flex-wrap">
      <template v-for="(item, index) in file">
        <div class="p-2 pt-1 ps-0 position-relative d-flex justify-content-center align-items-center">
          <img
              v-if="item.type.startsWith('image/')"
              class="msgImgFile rounded-3"
              :src=URLs[index]
              :alt="item"
              style="filter: brightness(60%)"
          >

          <video class="msgImgFile rounded-3" style="filter: brightness(60%)" v-if="item.type.startsWith('video/')">
            <source :src=URLs[index] :type="item.type">
          </video>

          <audio v-if="item.type.startsWith('audio/')" :src=URLs[index] ></audio>

          <div class="position-absolute text-center d-flex flex-column align-items-center">
            <div class="spinner-border text-primary" style="width: 1.5rem; height: 1.5rem" role="status"></div>
            <small>上传中 {{ Math.floor(progress)+'%'}} </small>
          </div>

        </div>
      </template>
    </div>
  </div>

  <div v-else>
    <div v-if="AttachmentUrls && AttachmentMimeTypes " class="d-flex flex-wrap">
      <template v-for="(item, index) in AttachmentUrls">
        <div class="p-2 pt-1 ps-0" v-if="AttachmentMimeTypes[index].startsWith('image/')">
          <img
              class="msgImgFile rounded-3"
              :src="host_custom+'/attachments/'+item"
              :alt="item"
          >
        </div>


        <AudioFile v-if="AttachmentMimeTypes[index].startsWith('audio/')" :url="`${host_custom}/attachments/${item}`" />


        <div class="p-2 pt-1 ps-0" v-if="AttachmentMimeTypes[index].startsWith('video/')">
          <video controls class="videoFile rounded-3">
            <source :src="host_custom+'/attachments/'+item" :type="AttachmentMimeTypes[index]">
          </video>
        </div>

      </template>
    </div>
  </div>

</template>

<style scoped>
.msgImgFile {
  max-width: 60vw;
  max-height: 220px;
  object-fit: cover;
}

.videoFile {
  max-height: 320px;
  max-width: 60vw;
  object-fit: cover;
}
</style>